<template>
  <div>
    <input class="search-input" type="text" autocomplete="false">
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'searchInput'
})
</script>

<style scoped>
.search-input {
  cursor: text;
  width: 10rem;
  height: 2rem;
  color: #4e6e8e;
  display: inline-block;
  border: 1px solid #cfd4db;
  border-radius: 2rem;
  font-size: .9rem;
  line-height: 2rem;
  padding: 0 .5rem 0 2rem;
  outline: none;
  transition: all .2s ease;
  background: #fff url('../assets/icons/svg/search.svg') .6rem .5rem no-repeat;
  background-size: 1rem;
}
.search-input:focus {
  border-color: var(--text-color-hover);
}
</style>
